<template>
    <div id="allocation_list">
        <el-card>
            <div class="check_box">
                <el-row :gutter="20" style="margin-bottom: 10px">
                    <el-col :span="4">
                        <div class="grid-content">
                            <el-input size="mini" suffix-icon="el-icon-search" v-model="transferOrderId" placeholder="请输入查询单号" @input="handleChangeSearch" clearable></el-input>
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div class="grid-content">
                            <el-select class="select-prefix" size="mini" v-model="outStoreNo" placeholder="请选择门店" filterable @change="handleChangeSearch" clearable>
                                <template slot = "prefix">
                                    <span class = 'prefixSlot'>调出门店</span>
                                </template>
                                <el-option-group
                                v-for="group in storeList"
                                :key="group.cityId"
                                :label="group.city">
                                    <el-option
                                        v-for="item in group.list"
                                        :key="item.storeNo"
                                        :label="item.storeName"
                                        :value="item.storeName">
                                    </el-option>
                                </el-option-group>
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div class="grid-content">
                            <el-select class="select-prefix" size="mini" v-model="inStoreNo" placeholder="请选择门店" filterable @change="handleChangeSearch" clearable>
                                <template slot = "prefix">
                                    <span class = 'prefixSlot'>调入门店</span>
                                </template>
                                <el-option-group
                                v-for="group in storeList"
                                :key="group.cityId"
                                :label="group.city">
                                    <el-option
                                        v-for="item in group.list"
                                        :key="item.storeNo"
                                        :label="item.storeName"
                                        :value="item.storeName">
                                    </el-option>
                                </el-option-group>
                            </el-select>
                        </div>
                    </el-col> 
                    <el-col :span="5">
                        <div class="grid-content">
                            <el-select class="select-prefix" size="mini" v-model="applyUserId" placeholder="请选择申请人" filterable @change="handleChangeSearch" clearable>
                                <template slot = "prefix">
                                    <span class = 'prefixSlot'>申请人</span>
                                </template>
                                <el-option
                                    v-for="item in userList"
                                    :key="item.userId"
                                    :label="item.personName"
                                    :value="item.userId">
                                </el-option>   
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div class="grid-content">
                            <el-select class="select-prefix" size="mini" v-model="approveStatus" placeholder="请选择调拨状态" filterable @change="handleChangeSearch" clearable>
                                <template slot = "prefix">
                                    <span class = 'prefixSlot'>调拨状态</span>
                                </template>
                                <el-option
                                    v-for="item in $Options.allocationStatus"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                               
                            </el-select>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <div class="grid-content">
                            <el-date-picker
                            size="mini"
                            v-model="time"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            @change="handleChangeSearch"
                            >
                            </el-date-picker>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content col_float_right">
                            <!-- <el-button type="primary" size="mini">查询</el-button> -->
                            <el-button size="mini" type="primary" @click="isShowCreate= true">新建调拨单</el-button>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-card>
        <el-card class="mg-t-10">
            <el-table stripe :data='tableData' border>
                <el-table-column label="单号" prop="transferOrderId" width="150"></el-table-column>
               
                <el-table-column label="调出门店" prop="senderStore" show-overflow-tooltip></el-table-column>
                <el-table-column label="调入门店" prop="receiverStore" show-overflow-tooltip></el-table-column>
                <el-table-column label="调拨数量" prop="applyQty" width="100"></el-table-column>
                <el-table-column label="出库数量" prop="pickingQty" width="100"></el-table-column>
                <el-table-column label="调拨状态" >
                    <template slot-scope="scope" >
                        <el-tag size="small"
                        :type="scope.row.approveStatus === 0 ? '' 
                        :scope.row.approveStatus === 1 ? 'warning' 
                        :scope.row.approveStatus === 2 ? 'success' 
                        :scope.row.approveStatus === -1 ? 'danger' : '' ">
                            {{ scope.row.approveStatus===0 ? '待提交' : scope.row.approveStatus === 1 ? '待审批' : 
                            scope.row.approveStatus === 2 ? (scope.row. outCount > scope.row.outCompleteCount ? '出库' + scope.row.outCompleteCount + '/' +scope.row.outCount : '已出库') : 
                            scope.row.approveStatus === -1 ? '已拒绝' : ''}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="申请人" prop="applyUser"></el-table-column>
                <el-table-column label="申请日期" prop="gmtApply" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" width="80">
                    <template slot-scope="scope">
                        <el-dropdown size="small" type="text" trigger="click" placement="bottom-start">
                                <span class="el-dropdown-link" style="font-size: 12px; cursor: pointer">
                                    操作<i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown" >
                                    <el-dropdown-item v-if="scope.row.approveStatus === 1 || scope.row.approveStatus === 2 " command="a" @click.native="handleClickCheck(scope.row)">查看</el-dropdown-item>
                                    <el-dropdown-item v-if="scope.row.approveStatus === 0 || scope.row.approveStatus === -1" command="a" @click.native="handleClickEdit(scope.row)">编辑</el-dropdown-item>
                                    <el-dropdown-item v-if="scope.row.approveStatus === 0" command="a" @click.native="handleClickDel(scope.row)">删除</el-dropdown-item>
                                    <el-dropdown-item command="b" v-if="scope.row.isCompleted && (scope.row.outCompleteCount == scope.row.outCount)" @click.native="handleClickDownload(scope.row)">下载</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
            <page :total="total" :page="page" :size="size" @handlepagechange="handlePageChange" @handleSizeChange="handleSizeChange"></page>
            <createAllocation v-if="isShowCreate" :isShowCreate="isShowCreate" @cancelShow="cancelShow"></createAllocation>
            <allocationDetails v-if="isShowDetails" :isShowDetails="isShowDetails" :detailsType="detailsType" :transferId="transferId" @cancelShow="cancelShow" @getAllocationList="getAllocationList"></allocationDetails>
            <addAllocationGoods v-if="isShowEdit" :isShow="isShowEdit" :transferId="transferId" :title="title" :allocationInfo="allocationInfo" @cancelAddAllocationGoods="cancelShow" @getAllocationList="getAllocationList"></addAllocationGoods>
        </el-card>
    </div>
</template>
<script>
    import page from '../../../commonComponents/page'
    import createAllocation from './createAllocation'
    import allocationDetails from './allocationDetails'
    import addAllocationGoods from './addAllocationGoods'
    export default {
        components: {page, createAllocation, allocationDetails, addAllocationGoods},
        data() {
            return {
                storeList: [],
                userList: [],
                transferOrderId: '',
                applyUserId: '',
                outStoreNo: '',
                inStoreNo: '',
                time: [],
                tableData: [],
                page: 1,
                size: 10,
                total: 1,
                approveStatus: '',
                isShowCreate: false, /**新建调拨任务 */
                isShowDetails: false, /**调拨任务查看 */
                isShowEdit: false,
                transferId: '',
                allocationInfo: '',
                detailsType: '1',
                downUrl: process.env.BASE_API + 'youbao/stock/api/stock/transfer/detail/list/' 

            }
        },
        mounted() {
            this.getStoreListByGroup()
            this.getUsetList()
            this.getAllocationList()
        },
        methods: {
            /**获取门店 */
            getStoreListByGroup() {
                this.$server.systemControlApi.getStoreListByGroup().then(res => {
                    this.storeList= res.data
                })
            },
            /**获取用户 */
            getUsetList() {
                this.$server.systemControlApi.getUserList().then(res => {
                    this.userList= res.data
                })
            },
            handleChangeSearch() {
                this.page= 1
                this.getAllocationList()
            },
            /**获取调拨单列表 */
            getAllocationList() {
                try{
                    let query= {
                        page: this.page,
                        size: this.size
                    }
                    let params= {
                        applyUserId: this.applyUserId,
                        approveStatus: this.approveStatus,
                        gmtApplyBegin: this.time && this.time.length > 0 ?this.formate(new Date(this.time[0]).getTime(), 'yyyy-MM-dd') : '',
                        gmtApplyEnd: this.time && this.time.length > 0 ?this.formate(new Date(this.time[1]).getTime(), 'yyyy-MM-dd') : '',
                        receiverStore: this.inStoreNo,
                        senderStore: this.outStoreNo,
                        transferOrderId: this.transferOrderId
                    }
                    this.$server.stockControlApi.getAllocationList(query, params).then(res => {
                        this.tableData= res.data
                        this.total= res.total
                    })
                }catch(err) {
                    this.$paramsError(err)
                }
            },
            handleChange() {},
            handlePageChange(page) {
                this.page= page
                this.getAllocationList()
            },
            handleSizeChange(size) {
                this.size= size
                this.getAllocationList()
            },
            /** 表格操作项 */
            handleClickCheck(scope) {
                this.transferId= scope.transferId
                this.isShowDetails= true
                // 查看 
            },
            handleClickEdit(scope) {
                this.transferId= scope.transferId
                this.allocationInfo= scope
                this.title= scope.senderStore + '-' + scope.receiverStore
                this.isShowEdit= true
                // 编辑
            },
            handleClickDel(scope) {
                try{
                    this.$confirm('确定删除？').then(_ => {
                        this.$server.stockControlApi.delAllocation(scope.transferId).then(res => {
                            this.getAllocationList()
                        })
                    }).catch()
                }catch(err){this.$paramsError(err)}
                //删除
            },
            handleClickDownload(scope) {
                //下载
                let params= {
                    name: scope.transferOrderId,
                    url: this.downUrl + scope.transferId
                }
                this.$server.excelApi.downLoadExcel(params)
            },
            cancelShow(title) {
                this.isShowCreate= title
                this.isShowDetails= title
                this.isShowEdit= title
            }


        }
    }
</script>